<template>
  <div>
    <div class="text-h4 tw-mb-4 tw-m-5" style="padding-left: 3px;border-left: 5px solid #3370FF;">
      个人资料
    </div>
    <div class="tw-m-5 tw-border tw-p-5 tw-shadow-lg">
      <q-form class="tw-space-y-3" @submit="submitForm()" @reset="resetForm()">
        <div class="tw-grid tw-grid-cols-2 tw-gap-10">
          <q-input
            class="tw-bg-gray-100 focus:tw-bg-white"
            outlined
            v-model="form.tnum"
            label="教工号"
            type="text"
            dense
            disable
          />
          <q-input
            class="tw-bg-gray-100 focus:tw-bg-white"
            outlined
            v-model="form.title"
            label="职称"
            type="text"
            dense
            disable
          />
        </div>

        <div class="tw-grid tw-grid-cols-3 tw-gap-5">
          <q-input
            outlined
            v-model="form.tname"
            label="用户名"
            type="text"
            dense
            :rules="[val => !!val || '用户名不能为空']"
          />
          <q-input
            outlined
            v-model="form.office"
            label="办公室"
            type="text"
            dense
          />
          <q-input
            outlined
            v-model="form.age"
            label="年龄"
            type="number"
            dense
            disable
          />
        </div>
        <div class="tw-grid tw-grid-cols-3 tw-gap-5">
          <q-input
            outlined
            v-model="form.email"
            label="电子邮件"
            type="email"
            dense
          />
          <q-input
            outlined
            v-model="form.qq"
            label="QQ"
            type="text"
            dense

          />
          <q-input
            outlined
            v-model="form.tel"
            label="电话"
            type="tel"
            dense
          />
        </div>
        <q-input
          outlined
          class="tw-mt-3"

          v-model="form.password"
          label="密码"
          type="password"
          dense
          :rules="[val => !!val || '密码不能为空', val => val.length >= 6 || '密码长度不能少于6位']"
        />
        <q-input
          outlined
          v-model="form.confirmPassword"
          label="确认密码"
          type="password"
          dense
          :rules="[val => !!val || '确认密码不能为空', val => val === form.password || '两次密码输入不一致']"
        />
        <q-btn type="submit" label="保存" color="primary" class="q-mt-md"/>
        <q-btn type="reset" label="重置" class="q-mt-md q-ml-sm"/>
      </q-form>
    </div>

  </div>
</template>

<script setup>
import {ref} from "vue";
import {api} from "boot/axios";
import {useQuasar} from "quasar";

const $q = useQuasar()

let info = ref(JSON.parse(localStorage.getItem('info')))
let form = ref({
  username: info.value.sname,
  tnum: info.value.tnum,
  tname: info.value.tname,
  qq: info.value.qq,
  age: info.value.age,
  email: info.value.email,
  tel: info.value.tel,
  office: info.value.location,
  dept: info.value.dept,
  title: info.value.ttile,
  password: info.value.password,
  confirmPassword: info.value.password
})
let submitForm = () => {
  let formData = new FormData()
  formData.append('tnum', form.value.tnum)
  formData.append('tname', form.value.tname)
  formData.append('age', form.value.age)
  formData.append('qq', form.value.qq)
  formData.append('email', form.value.email)
  formData.append('tel', form.value.tel)
  formData.append('dept', form.value.dept)
  formData.append('ttile', form.value.title)
  formData.append('location', form.value.office)
  formData.append('password', form.value.confirmPassword)

  api({
    url: '/job/teacher/update',
    method: 'post',
    data: formData
  }).then((res) => {
    let data = res.data.data
    if (res.data.code === 200) {
      api.get('/job/teacher/getinfo?' + new URLSearchParams({tnum: form.value.tnum})).then((res) => {
        localStorage.setItem('info', JSON.stringify(res.data.data))
      })
      $q.notify({
        message: '修改成功',
        color: 'positive',
        position: 'top'
      })
    } else {
      $q.notify({
        message: '修改失败',
        color: 'negative',
        position: 'top'
      })
    }
  })


}
let resetForm = () => {

}
</script>

<style scoped>

</style>
